<template>
  <view class="root">
    <view class="top-bg">

    </view>
    <view class="top">
      <view class="t">
        <image src="" class="enterpress-icon"></image>
        <view class="name">
          {{detail.review.companyMessageName}}
        </view>
      </view>
      <view class="t-item">
        <view class="t-label">
          企业地址:
        </view>
        <view class="t-value">
          {{detail.inspect.companyAddressDetail}}
        </view>
      </view>
      <view class="t-item">
        <view class="t-label">
          所属行业:
        </view>
        <view class="t-value">
          {{detail.review.industryInformationName}}
        </view>
      </view>
      <view class="t-item">
        <view class="t-label">
          法人姓名:
        </view>
        <view class="t-value">
          {{detail.review.companyLegalPersonName}}
        </view>
      </view>
    </view>
    <view class="bottom">
      <u-subsection bgColor="#F1F7FF" inactiveColor="#5C6C7E" activeColor="#2488F5" :list="list" :current="current"
        @change="sectionChange"></u-subsection>
      <view class="check-wrapper" v-show="current == 0">
        <view class="i-title">检查民警</view>
        <view class="re-box">
          <view class="re-left">
            <view class="re-item">
              <view class="re-label re-label-1">
                所属辖区
              </view>
              <view class="re-value">
                {{detail.inspect.jurisdictionName}}
              </view>
            </view>
            <view class="re-item">
              <view class="re-label re-label-1">
                检查民/辅警
              </view>
              <view class="re-value">
                {{detail.inspect.policeUserName}}
              </view>
            </view>
            <view class="re-item">
              <view class="re-label re-label-1">
                警 号
              </view>
              <view class="re-value">
                {{detail.inspect.policeUserNo ? detail.inspect.policeUserNo : '暂无' }}
              </view>
            </view>
            <view class="re-item">
              <view class="re-label re-label-1">
                陪同民/辅警
              </view>
              <view class="re-value">
                {{detail.inspect.auxiliaryPoliceName}}
              </view>
            </view>
            <view class="re-item">
              <view class="re-label re-label-1">
                签到照片
              </view>
              <view class="re-value look-text" @click="handlePreview([detail.inspect.signPicture])">
                查看
              </view>
            </view>
          </view>
          <image class="re-img" :src="imgPrefix + detail.inspect.policeUserImage"></image>
        </view>
        <u-line dashed length="658rpx" margin="24rpx auto 0 auto" color="#707070"></u-line>



        <view class="i-title">检查记录</view>
        <view class="re-box">
          <view class="re-left">
            <view class="re-item">
              <view class="re-label">
                检查类型
              </view>
              <view class="re-value">
                {{detail.inspect.industryExamineName}}
              </view>
            </view>
            <view class="re-item">
              <view class="re-label">
                检查内容
              </view>
              <view class="re-value look-text"
                :data-url="`/goOverBag/siteInspectionContent/siteInspectionContent?taskId=${routerParams.id}`"
                @click="handleClickRouter">
                查看
              </view>
            </view>
            <view class="re-item">
              <view class="re-label">
                检查时间
              </view>
              <view class="re-value">
                {{detail.inspect.checkTime}}
              </view>
            </view>
            <view class="re-item">
              <view class="re-label">
                检查结果
              </view>
              <view class="re-value" :class="detail.inspect.checkResult == 1  ? 'qualified-text' : 'unqualified-text'">
                {{detail.inspect.checkResult == 1 ? '合格' : '不合格'}}
              </view>
              <view class="look-detail" v-if="detail.inspect.checkResult !== 1"
                :data-url="`/goOverBag/belowtheMark/nonGooverDetails?taskId=${detail.inspect.checkId}`"
                @click="handleClickRouter">
                查看详情
                <u-icon name="arrow-right" color="#2488F5" size="18"></u-icon>
              </view>
            </view>
            <view class="re-item">
              <view class="re-label">
                处罚结果
              </view>
              <view class="re-value">
                {{detail.inspect.rectificationType == 1 ? '限期整改' : '停业整顿'}}
              </view>
            </view>
            <view class="re-item">
              <view class="re-label" style="width: unset;">
                责任人签名
              </view>
            </view>
            <image class="responsible-img" :src=" imgPrefix + detail.inspect.principalSignatureUrl"></image>
            <view class="re-item">
              <view class="re-label">
                电子文书
              </view>
              <view class="re-value look-text"
                :data-url="`/keepArecord/textBooks/textBooks?id=${detail.inspect.unqualifiedId}&fronttype=1`"
                @click="handleClickRouter">
                查看
              </view>
            </view>
          </view>
        </view>

        <template v-if="detail.inspect.receipt">
          <view class="i-title">企业回执详情</view>
          <view class="re-box">
            <view class="re-left">
              <view class="re-item">
                <view class="re-label">
                  提交时间
                </view>
                <view class="re-value">
                  {{detail.inspect.receiptTime}}
                </view>
              </view>
              <view class="re-item">
                <view class="re-label">
                  回执文字
                </view>
                <view class="re-value">
                  {{detail.inspect.receiptContent}}
                </view>
              </view>
              <view class="re-item">
                <view class="re-label">
                  回执图片
                </view>
                <view class="re-value" v-if="!detail.inspect.receiptContentImage">
                  暂无
                </view>
              </view>
              <view class="re-img-wrapper" v-if="detail.inspect.receiptContentImage">
                <image :src="imgPrefix + item" class="img-png"
                  v-for="(item, index) in detail.inspect.receiptContentImage.split(',')" :key="index">
                </image>
              </view>
            </view>
          </view>
        </template>
      </view>
      <view class="recheck-wrapper" v-show="current == 1">
        <view class="i-title">复查民警</view>
        <view class="re-box">
          <view class="re-left">
            <view class="re-item">
              <view class="re-label re-label-1">
                所属辖区
              </view>
              <view class="re-value">
                {{detail.review.jurisdictionName}}
              </view>
            </view>
            <view class="re-item">
              <view class="re-label re-label-1">
                复查民/辅警
              </view>
              <view class="re-value">
                {{detail.review.policeUserName}}
              </view>
            </view>
            <view class="re-item">
              <view class="re-label re-label-1">
                警 号
              </view>
              <view class="re-value">
                {{detail.review.policeUserNo ? detail.review.policeUserNo : '暂无'}}
              </view>
            </view>
            <view class="re-item">
              <view class="re-label re-label-1">
                陪同民/辅警
              </view>
              <view class="re-value">
                {{detail.review.auxiliaryPoliceName}}
              </view>
            </view>
            <view class="re-item">
              <view class="re-label re-label-1">
                签到照片
              </view>
              <view class="re-value look-text" @click="handlePreview([detail.review.signPicture])">
                查看
              </view>
            </view>
          </view>
          <image class="re-img" :src="imgPrefix + detail.review.policeUserImage"></image>
        </view>
        <u-line dashed length="658rpx" margin="24rpx auto 0 auto" color="#707070"></u-line>



        <view class="i-title">复查记录</view>
        <view class="re-box">
          <view class="re-left">
            <view class="re-item">
              <view class="re-label">
                复查类型
              </view>
              <view class="re-value">
                {{detail.review.industryExamineName}}
              </view>
            </view>
            <view class="re-item">
              <view class="re-label">
                复查内容
              </view>
              <view class="re-value look-text"
                :data-url="`/goOverBag/siteInspectionContent/siteInspectionContent?taskId=${routerParams.id}`"
                @click="handleClickRouter">
                查看
              </view>
            </view>
            <view class="re-item">
              <view class="re-label">
                复查时间
              </view>
              <view class="re-value">
                {{detail.review.checkTime}}
              </view>
            </view>
            <view class="re-item">
              <view class="re-label">
                复查结果
              </view>
              <view class="re-value" :class="detail.review.checkResult == 1  ? 'qualified-text' : 'unqualified-text'">
                {{detail.review.checkResult == 1 ? '合格' : '不合格'}}
              </view>
              <view class="look-detail" v-if="detail.review.checkResult !== 1"
                :data-url="`/goOverBag/belowtheMark/nonGooverDetails?taskId=${routerParams.id}`"
                @click="handleClickRouter">
                查看详情
                <u-icon name="arrow-right" color="#2488F5" size="18"></u-icon>
              </view>
            </view>
            <view class="re-item" v-if="detail.review.rectificationType">
              <view class="re-label">
                处罚结果
              </view>
              <view class="re-value">
                {{detail.review.rectificationType == 1 ? '限期整改' : '停业整顿'}}
              </view>
            </view>
            <view class="re-item">
              <view class="re-label" style="width: unset;">
                责任人签名
              </view>
            </view>
            <image class="responsible-img" :src=" imgPrefix + detail.review.principalSignatureUrl"></image>
            <view class="re-item" v-if="detail.review.unqualifiedId">
              <view class="re-label">
                电子文书
              </view>
              <view class="re-value look-text"
                :data-url="`/keepArecord/textBooks/textBooks?id=${detail.review.unqualifiedId}&fronttype=1`"
                @click="handleClickRouter">
                查看
              </view>
            </view>
          </view>
        </view>

        <template v-if="detail.review.receipt">
          <view class="i-title">企业回执详情</view>
          <view class="re-box">
            <view class="re-left">
              <view class="re-item">
                <view class="re-label">
                  提交时间
                </view>
                <view class="re-value">
                  {{detail.review.receiptTime}}
                </view>
              </view>
              <view class="re-item">
                <view class="re-label">
                  回执文字
                </view>
                <view class="re-value">
                  {{detail.review.receiptContent}}
                </view>
              </view>
              <view class="re-item">
                <view class="re-label">
                  回执图片
                </view>
                <view class="re-value" v-if="!detail.review.receiptContentImage">
                  暂无
                </view>
              </view>
              <view class="re-img-wrapper" v-if="detail.review.receiptContentImage">
                <image :src="imgPrefix + item" class="img-png"
                  v-for="(item, index) in detail.review.receiptContentImage.split(',')" :key="index"></image>
              </view>
            </view>
          </view>
        </template>
      </view>
    </view>
  </view>
</template>

<script>
  import {
    findTaskDetail
  } from '../api/api';
  import {
    getOptionsParams,
    isLoading,
    previewImage,
    handleClickRouter
  } from '../utils/util';

  export default {
    data() {
      return {
        imgPrefix: uni.getStorageSync('imgPrefix'),
        list: ['检查信息', '复查信息'],
        current: 0,
        routerParams: {},
        detail: {
          inspect: {},
          review: {}
        }
      }
    },
    onLoad(options) {
      this.routerParams = getOptionsParams(options)
      this.initData()
    },
    methods: {
      handleClickRouter,
      sectionChange(index) {
        this.current = index;
      },
      initData() {
        isLoading(true)
        const params = {
          checkId: this.routerParams.id
        }
        findTaskDetail(params)
          .then((res) => {
            this.detail = res.result
          })
          .finally(() => {
            isLoading(false)
          })
      },
      handlePreview(urls) {
        previewImage.call(this, urls)
      }
    }
  }
</script>

<style>
  page {
    width: 100%;
    padding: 10rpx 16rpx;
    background: #F9F9F9;
    position: relative;
    box-sizing: border-box;
  }
</style>
<style lang="scss" scoped>
  .root {
    padding-bottom: 50rpx;

    .top-bg {
      height: 155rpx;
      width: 100%;
      background: #2488f5;
      position: absolute;
      left: 0;
      top: 0;
    }

    .top {
      position: relative;
      background: #FFFFFF;
      box-shadow: 0rpx 3rpx 6rpx 1rpx rgba(180, 180, 180, 0.16);
      border-radius: 16rpx 16rpx 16rpx 16rpx;
      padding-bottom: 57rpx;
      margin-bottom: 13rpx;

      .t {
        .enterpress-icon {
          width: 36rpx;
          height: 36rpx;
          margin-right: 4rpx;
          flex-shrink: 0;
        }

        .name {
          font-weight: bold;
          font-size: 32rpx;
          color: #333333;
        }

        display: flex;
        align-items: center;
        height: 96rpx;
        background: #ECF9FF;
        border-radius: 16rpx 16rpx 0rpx 0rpx;
      }

      .t-item {
        margin-top: 27rpx;
        display: flex;
        padding: 0 33rpx;

        .t-label {
          font-weight: 400;
          font-size: 28rpx;
          color: #A1A1A1;
          flex-shrink: 0;
        }

        .t-value {
          margin-left: 12rpx;
          font-weight: 500;
          font-size: 28rpx;
          color: #666666;
        }
      }
    }

    .bottom {
      background: #FFFFFF;
      box-shadow: 0rpx 3rpx 6rpx 1rpx rgba(180, 180, 180, 0.16);
      border-radius: 16rpx 16rpx 16rpx 16rpx;
      padding: 7rpx;

      /deep/ .u-subsection__item {
        border: 0 !important;
      }

      /deep/ .u-subsection--button {
        height: 72rpx;
        background: #F1F7FF;
        border-radius: 44rpx 44rpx 44rpx 44rpx;
        padding: 0;
      }

      /deep/ .u-subsection__item__text {
        font-size: 28rpx !important;
      }

      /deep/ .u-subsection__bar {
        background: #C7E2FF !important;
        height: 72rpx !important;
        border-radius: 44rpx 44rpx 44rpx 44rpx !important;
      }

      .i-title {
        font-weight: bold;
        font-size: 28rpx;
        color: #000000;
        padding-left: 32rpx;
        margin-bottom: 26rpx;
        margin-top: 30rpx;
      }

      .re-box {
        display: flex;
        justify-content: space-between;
        padding: 0 32rpx;

        .re-left {
          .re-item {
            display: flex;
            align-items: baseline;
            margin-bottom: 18rpx;
            position: relative;

            .re-label {
              font-weight: 400;
              font-size: 26rpx;
              color: #A1A1A1;
              width: 111rpx;
              text-align: justify;
              text-align-last: justify;
              margin-right: 18rpx;
              position: relative;
              line-height: 26rpx;
              height: 26rpx;
              flex-shrink: 0;


              &::after {
                font-size: 26rpx;
                line-height: 1;
                content: ':';
                position: absolute;
                right: -6rpx;
              }
            }

            .re-label-1 {
              width: 144rpx;
            }

            .re-value {
              font-weight: 500;
              font-size: 28rpx;
              color: #333333;
            }

            .qualified-text {
              color: #18BC37;
            }

            .unqualified-text {
              color: #EE1C1C;
            }

            .look-text {
              color: #2488F5
            }

            .look-detail {
              position: absolute;
              right: 0;
              display: flex;
              align-items: center;
              font-weight: 500;
              font-size: 28rpx;
              color: #2488F5;
            }
          }

          .responsible-img {
            width: 639rpx;
            height: 271rpx;
            border-radius: 8rpx 8rpx 8rpx 8rpx;
            margin: 0 auto;
          }

          .re-img-wrapper {
            display: flex;
            flex-wrap: wrap;
            gap: 20rpx;

            .img-png {
              width: 200rpx;
              height: 180rpx;
              border-radius: 6rpx 6rpx 6rpx 6rpx;
            }
          }
        }

        .re-img {
          width: 200rpx;
          height: 236rpx;
          flex-shrink: 0;
        }
      }
    }
  }
</style>